<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>前端原型 - 文生图</title>
  <link rel="stylesheet" href="../assets/wireframe.css" />
</head>
<body>
  <div class="app-shell">
    <header class="wf-header">
      <a class="wf-btn" href="./main.html">返回</a>
      <div class="wf-title">文生图</div>
    </header>
    <main class="wf-container">
      <div class="wf-card">
        <div class="wf-section-title">AI智能图像生成</div>
        <div class="wf-note">输入文字描述，AI为您生成精美图片</div>
      </div>
      
      <!-- 输入区域 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">图片描述</div>
        <div class="wf-row">
          <textarea class="wf-input" placeholder="请描述您想要生成的图片..." style="height:80px; resize:none;"></textarea>
        </div>
        <div class="wf-row" style="margin-top:12px">
          <button class="wf-btn primary">生成图片</button>
          <button class="wf-btn">清除</button>
        </div>
      </div>
      
      <!-- 生成选项 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">生成选项</div>
        <div class="wf-grid">
          <div class="col-6">
            <div class="wf-card">
              <div class="wf-section-title">图片尺寸</div>
              <div class="wf-row">
                <span class="wf-chip">1:1</span>
                <span class="wf-chip">16:9</span>
                <span class="wf-chip">9:16</span>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="wf-card">
              <div class="wf-section-title">图片风格</div>
              <div class="wf-row">
                <span class="wf-chip">写实</span>
                <span class="wf-chip">动漫</span>
                <span class="wf-chip">艺术</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 生成结果 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">生成结果</div>
        <div class="wf-skeleton" style="height:200px"></div>
        <div class="wf-note">提示：点击"生成图片"按钮后，这里将显示生成的图片</div>
      </div>
    </main>
  </div>
  <script src="../assets/wireframe.js"></script>
</body>
</html>
